<template>
	<view>
		<view class="container">
			<view @click="changeModel()">
				<back></back>
			</view>
			<view class="drugList">
				<view class="drugItem" v-for="(items,index) in drugList" :key='index'>
					<view class="drugTitle">
						<view class="drugName">
							<text>{{items.name}}</text>
						</view>
						<view class="drugTimes">
							<text>{{items.method}}&nbsp;&nbsp;&nbsp;{{items.content}}</text>
						</view>
					</view>
					<view class="drugCheck">
						<view class="drugCheckIcon" @click="addCount(index)">
							<image class="Icon" src="../../static/logo.png" mode=""></image>
						</view>
						<view v-if="items.count != 0">
							<view class="drugCheckText">
								<text>+{{items.count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="setting">
				<view class="settingIcon">
					<image class="Icon" src="../../static/logo.png" mode=""></image>
				</view>
				<view class="settingText">
					<text>设置提醒</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drugList: [{
						name: '阿巴阿巴阿巴',
						method: '每日1次',
						content: '1次2片',
						count: '0'
					},
					{
						name: '阿巴阿巴',
						method: '每日1次',
						content: '1次2片',
						count: '0'
					}
				],

			};
		},
		created() {
			this.getDrugListLen()
		},
		methods: {
			
			addCount(index){
				this.drugList[index].count++;
			},
			changeModel() {
				let data = {
					showDrug: false,
					showIndex: true,
					title: ''
				}
				this.$emit('fDrug', data);
			},
			//获取drugList列表元素个数
			getDrugListLen() {
				this.drugNum = this.drugList.length;
				let data = {
					drugNum: this.drugNum
				}
				console.log(this.drugNum);
				this.$emit('getDrugListLen', data)
			},

			//获取药品信息
			getDrugMsg() {
				this.$request.get('/Drug/Oldster/SelectDrug', {

				}).then(data => {
					console.log('data', data);
					if (data.data.code == '200') {
						let List = data.data.data;
						for (let i = 0; i <= List.length; i++) {
							drugList[i] = List[i];
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 90%;
		height: 75vh;
		position: relative;
		top: -8vh;
		margin: 0 auto;
		background-color: #ffffff;
		/* border: 1rpx solid #000000; */
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 3vw;
	}

	.Icon {
		max-width: 100%;
		max-height: 100%;
	}

	.drugList {
		height: 45vh;
		width: 90%;
		margin: 0 auto;
		overflow-y: scroll;
	}

	.drugItem {
		width: 100%;
		height: 15vh;
		/* float: left; */
		margin-top: 3vh;
		border-bottom: 5rpx #FFB938 dashed;
	}

	.drugTitle {
		width: 60%;
		height: 100%;
		float: left;

	}

	.drugName {
		width: 100%;
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 58rpx;
		font-weight: bold;
	}

	.drugTimes {
		width: 100%;
		float: left;
		margin-top: 3vh;
		font-size: 42rpx;
		font-weight: 500;

	}

	.drugCheck {
		width: 30%;
		height: 10vh;
		float: right;
		/* margin-top: 5vh; */

	}

	.drugCheckIcon {
		float: right;
		height: 100rpx;
		width: 100rpx;
		/* margin-top: 1vh; */
		border-radius: 50%;
		overflow: hidden;

	}

	.drugCheckText {
		text-align: right;
		width: 100%;
		float: right;
		font-size: 48rpx;
		margin-right: 4vw;
		margin-top: 1vh;
		color: #F6681D;
	}

	.setting {
		height: 200rpx;
		width: 200rpx;

		margin: 4vh auto;
	}

	.settingIcon {
		height: 150rpx;
		width: 150rpx;
		border-radius: 2vh;
		overflow: hidden;
	}

	.settingText {
		margin-top: 1vh;
		font-weight: bold;
	}
</style>
